<script setup >
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

const chartContainer = ref();
let chart = null;

const initChart = () => {
  if (chartContainer.value) {
    chart = echarts.init(chartContainer.value);
    const option = {
      backgroundColor: "transparent",
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
        axisLine: {
          lineStyle: {
            color: "#1E90FF",
          },
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#1E90FF",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(30, 144, 255, 0.1)",
          },
        },
      },
      series: [
        {
          name: "CPU Usage",
          type: "line",
          data: [30, 40, 60, 70, 50, 45],
          itemStyle: {
            color: "#1E90FF",
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(30, 144, 255, 0.3)",
              },
              {
                offset: 1,
                color: "rgba(30, 144, 255, 0.1)",
              },
            ]),
          },
        },
      ],
    };
    chart.setOption(option);
  }
};

const handleResize = () => {
  chart?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  chart?.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>